<template>
    <div style="/*width: 33%;*/height: 90%;margin-top: 50px;float: left;">
        <div class="circle v-fl">
            <div class="inner-ring-three wd-tc wd-tip-wrap">
                <p style="position: absolute;top: 100px;text-align: center;width: 100%;color: #ffdf04;font-weight: bold;">
                    <ICountUp
                        :endVal="parseInt(indexData.item)"
                        :key="Math.random()"
                        @ready="onReady"
                    />
                    项</p>
              <!--  <card-fensan :indexData="indexData" ></card-fensan>-->
                <slot></slot>
            </div>
            <div class="outer-ring rotates">
            </div>
        </div>
        <div class="v-fl" style="width: 100%;">
            <div class="circle-around wd-tip-wrap" id="circleOne3" >
                    <p style="text-align: center;color:#6f9ce3;font-size: 36px;">{{indexData.name}}</p>
                    <p class="wd-fb" style="text-align: center;color: #fff;font-size: 48px;"><ICountUp
                        :endVal="parseInt(indexData.num)"
                        :key="Math.random()"
                        @ready="onReady"
                    /><span class="wd-fb" style="font-size: 36px;">
                        件
                    </span></p>
                    <slot name="total"></slot>
            </div>
        </div>

        <!--<center-pop v-if="display==1" id="circleOneSubindex1" :display="display" :dataType="dataType" :dataRange="dataRange" :mainClass="mainClass"></center-pop>
        <center-pop v-if="display==2" id="circleOneSubindex2" :display="display" :dataType="dataType" :dataRange="dataRange" :mainClass="mainClass"></center-pop>
        <center-pop v-if="display==3" id="circleOneSubindex3" :display="display" :dataType="dataType" :dataRange="dataRange" :mainClass="mainClassNo"></center-pop>
        <center-pop v-if="display==4" id="circleOneSubindex4" :display="display" :dataType="dataType" :dataRange="dataRange" :mainClass="mainClassOne"></center-pop>-->
    </div>

</template>

<script>
    import ICountUp from 'vue-countup-v2'
    import { popViewCenter } from '@/utils/viewPopup.js'
   // import { CenterPop } from '@/components/cn/sh/gov/panel'
  //  import { CardFensan } from '@/components/cn/sh/gov/gap-chart'

    export default {
        name:'CircleFive',
        data() {
            return {
                dataType: 'gapCase',
                dataRange: 'all',
                mainClass: 'all',
                mainClassOne: 'one',
                mainClassNo: 'no',
                display: 0,  //弹窗都不显示，
                indexData:{
                    item:"123",
                    name:"name",
                    num:"123"
                }
            }
        },
        components:{
          //  CenterPop,
            ICountUp,
           // CardFensan,
        },
       // props:['indexData'],
        mounted(){
        },
        methods:{
            onReady(instance, CountUp) {
              //  instance.update();
            },
            onLoad(index){
                this.display=index;
                this.$nextTick(() => {
                    popViewCenter("#circleOneSubindex"+index);
                });
            }
        },
        created(){
        },
    }

</script>
<style lang="less" scoped>
    @keyframes rotates{
        from{transform:rotate(0deg);
            -ms-transform:rotate(0deg); /* Internet Explorer */
            -moz-transform:rotate(0deg); /* Firefox */
            -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
            -o-transform:rotate(0deg); /* Opera */}
        to{
            transform:rotate(360deg);
            -ms-transform:rotate(360deg); /* Internet Explorer */
            -moz-transform:rotate(360deg); /* Firefox */
            -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
            -o-transform:rotate(360deg);
        }
    }
    .circle{
        position: relative;
        margin: 0 35px;
        .inner-ring-three{
            width: 238px;
            height: 239px;
            background: url(./img/inner-ring-three.png) no-repeat;
            padding-top: 50px;
            .num{
                font-size: 72px;
            }
        }
        .wd-tc{
            text-align: center;
        }
        .wd-tip-wrap{
            position: relative;
            .tipcontent{
                font-size: 36px;
                display: none;
                position: absolute;
                top:0;
                border:2px solid #2d93ed;
                z-index: 1001;
                padding: 20px;
                min-width: 240px;
                border-radius: 10px;
                background: rgba(5, 54, 105, 0.9);
                &.bottom{
                    top:auto;
                    bottom: 0;
                }
            }
            .content p{
                margin: 10px 0 0 20px;
                font-size: 30px;
                span{
                    margin:0 20px;
                    font-size: 32px;
                    color:rgb(255, 223, 4);
                }
            }
            &:hover{
                .tipcontent{
                    display: block
                }
            }
        }
        .inner-ring{
            width: 252px;
            height: 252px;
            background: url(img/Inner-ring.png) no-repeat;
            .font{
                text-align: center;
                color:  #67BBD0;
                line-height: 238px;
            }
        }
        .outer-ring{
            width: 303px;
            height: 302px;
            position: absolute;
            top: -32px;
            left: -32px;
            background: url(img/outer-ring.png) no-repeat;
        }
        .rotates{
            animation: rotates 5s linear infinite;
            -webkit-animation: rotates 5s linear infinite;
        }
    }
    .circle-around{
        color:lighten(#67BBD0, 15%) ;
        margin-top: 25px;
        p{
            text-align: right;
            font-size: 40px;
        }
        .wd-fb{
            font-weight: bold;
        }
    }
</style >


